<div class="panel panel-default">

	<div class="panel-heading">
		<h3 class="panel-title">Establecimientos</h3>
	</div>

	<div class="panel-body">
		<div id="custom-toolbar">
			<div class="form-inline" role="form">
				<button type="submit" class="btn btn-default" id="btnNuevo">
					<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
					Nuevo
				</button>
			</div>
		</div>
		<table id="table" data-search="true" data-toolbar="#custom-toolbar"
			data-side-pagination="server" data-pagination="true"
			data-page-list="[10, 20, 30]"
			data-url="<?php echo base_url();?>index.php/establecimiento/listaEstablecimientos">
			<thead>
				<tr>
					<th data-field="ID_ESTABLECIMIENTO" data-align="center"
						data-sortable="false">ID</th>
					<th data-field="NOMBRE" data-align="center" data-sortable="false">NOMBRE</th>
					<th data-field="CATEGORIA" data-align="center" data-sortable="false">CATEGORIA</th>
					<th data-field="ID_ESTABLECIMIENTO" data-width="90"
						data-align="center" data-sortable="false"
						data-formatter="formatEditar"></th>
				</tr>
			</thead>
		</table>
	</div>
</div>

<div id="dialogEstablecimiento" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 id="lblTitulo" class="modal-title"></h4>
			</div>
			<form id="formEstablecimiento" class="form-horizontal" method="post"
				action="<?php echo base_url();?>index.php/establecimiento/guardar">
				<div class="modal-body">
					<div class="form-group">
						<label class="col-sm-3 control-label">Id</label>
						<div class="col-sm-9">
							<span id="lblId"></span>
							<input type="hidden" class="form-control" id="id" name="id">
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-3 control-label">Nombre</label>
						<div class="col-sm-9">
							<input type="text" class="form-control" id="nombre" name="nombre"
								required>
						</div>
					</div>
					<div class="form-group">
						<input type="hidden" id="categoria" name="categoria">
						<label class="col-sm-3 control-label">Categoria</label>
						<span class="col-sm-4" id="txtCategoria"></span>
						<div class="col-sm-5">
							<input id="busCat" placeholder="Buscar categoria">
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="submit" class="btn btn-primary">Guardar</button>
					<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
				</div>
			</form>
		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<script type="text/javascript">
	var categSelecc = null;

  $(function() {
    $('#table').bootstrapTable({});

    $('#formEstablecimiento').ajaxForm({
    	beforeSubmit: function(arr, $form, options) {
    		var cat = $('#categoria').val();
    		if (cat == null || cat == '') {
        		alert ("Seleccione una categoria");
        		return false;
    		}
    		return true;
    	},
      success: function (response, statusText) {
        $('#dialogEstablecimiento').modal('hide');
        $('#table').bootstrapTable('refresh', {silent: true});
        BootstrapDialog.alert('Establecimiento guardado');
      }
    });

    $("#btnNuevo").click (function () {
      $('#formEstablecimiento input').val('');
      $('#lblId').text('');
      $('#lblTitulo').text('Nuevo Establecimiento');
      $('#dialogEstablecimiento').modal('show');
    });
    
    $("#busCat").autocomplete({
    	source: function( request, response ) {
            $.ajax({
              url: "<?php echo base_url();?>index.php/establecimiento/listaCategorias",
              type: 'POST',
              data: {
            	  palabra: request.term,
            	  items: 5
              },
              success: function( data ) {
                var arr = [];
            	$.each(data, function( index, value ) {
            		arr.push({id: value.ID_CATEGORIA, label: value.NOMBRE, value: value.NOMBRE});
            	});
                response( arr );
              }
            });
          },
        minLength: 2,
        select: function( event, ui ) {
            $("#txtCategoria").text(ui.item.value);
            $("#categoria").val(ui.item.id);
            $(this).val('');
            return false;
        }
      });
  });

  function formatEditar (value, row) { 
    return '<button class="btn btn-default btn-xs" type="button" onclick="editar(' + 
    		row.ID_ESTABLECIMIENTO + ',\'' + row.NOMBRE + '\',' + row.ID_CATEGORIA + ',\'' + row.CATEGORIA +
      		'\')"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></button>';
  }

  function editar (idEst, establecimiento, idCat, categoria) {
   	$('#lblId').text(idEst);
   	$('#id').val(idEst);
   	$('#nombre').val(establecimiento);
   	$('#categoria').val(idCat);
   	$('#txtCategoria').text(categoria);
    $('#lblTitulo').text('Editar Establecimiento');
    $('#dialogEstablecimiento').modal('show');
  }

  	function categorias (value) {
	  	$('#establecimiento').val(value);
	  	$('#dialogCategorias').modal('show');
  	}
  	function inspeccionar(obj)
  	{
  	  var msg = '';

  	  for (var property in obj)
  	  {
  	    if (typeof obj[property] == 'function')
  	    {
  	      var inicio = obj[property].toString().indexOf('function');
  	      var fin = obj[property].toString().indexOf(')')+1;
  	      var propertyValue=obj[property].toString().substring(inicio,fin);
  	      msg +=(typeof obj[property])+' '+property+' : '+propertyValue+' ;\n';
  	    }
  	    else if (typeof obj[property] == 'unknown')
  	    {
  	      msg += 'unknown '+property+' : unknown ;\n';
  	    }
  	    else
  	    {
  	      msg +=(typeof obj[property])+' '+property+' : '+obj[property]+' ;\n';
  	    }
  	  }
  	  return msg;
  	}
</script>